<template>

  <div>
     <el-table :data="carSeriesData" style="width: 100%" height="600" align="center" class="table">
        <el-table-column prop="date" label="运营位" width="180">
            <template  slot-scope="scope">
            <span>第{{scope.$index+1}}位</span>
          </template>
        </el-table-column>
        <el-table-column  prop="modelName" label="车系名称" width="180">
          
        </el-table-column>
        <el-table-column prop="minPrice" label="最低价" width="180">
          <template slot-scope="scope">
            {{scope.row.minPrice}}
            {{scope.row.minPrice==null?'':'万'}}
          </template>
        </el-table-column>
          <el-table-column  prop="address" label="操作排序">
          <template slot-scope="scope">
            <div class="handle" v-if="scope.row.status">
              <el-cascader v-model="intentCarStyles" clearable ref="carType" placeholder="意向车型" :options="carTypeData" :props="carTypeLabel"></el-cascader> 
              <div>
                <el-button type="text" style="color:#008DF8;cursor: pointer;margin-left: 20px" 
                @click.stop="scope.row.carModelStatus==true?carModelAdd(scope):carModelSave(scope)">保存</el-button>
                <el-button type="text" style="color:#008DF8;cursor: pointer;" @click.stop="carModelCancel(scope)">取消</el-button>
              </div>
            </div>
            <i  v-if="scope.row.editStatus" class="el-icon-edit-outline" style="font-size: 25px;margin-left: 10px" @click.stop="carModelEdit(scope)"></i>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
 import {
    getCarModelOrderList,addCarModelOrder,updateCarModelOrder,changeCarModelOrder,getSelectCarMakeGroupModel
  } from '@/service/api/index'
  import Sortable from 'sortablejs';
export default {
  components: {
    Sortable
  },
  data(){
    return {
      handleStatus:false,
      status:false,
      carSeriesData:[],
      intentCarStyles:'',
      sortString:'',
      carTypeData:[],
      carTypeLabel:{
        value:'modelId',
        label:'name',
        children:'list'
      }
    }
  },
  created () {
    this.carModelList();
    this.sortString="";
  },
  mounted () {
    this.sortString="";
    this.rowDrop();
  },
  methods:{
    carModelList(){
      getCarModelOrderList().then(res=>{  //车系位列表
        if(res.code==0){
          let empyObj=[];
          if(res.data.length<=6){
            for(let i=0;i<6-res.data.length;i++){
              empyObj.push({ossUrl:'',carModelStatus:true,modelId:0})
            }
            this.carSeriesData=this.carSeriesData.concat(res.data,empyObj);
            for(let i=0;i<this.carSeriesData.length;i++){
              this.carSeriesData[i].status=false;
              this.carSeriesData[i].editStatus=true;
            }
          }
          this.$forceUpdate()
        }else{
          this.$notify({
            type:'error',
            message:res.errMsg
          })
        }
      })
    },
    brandSort(){  //拖拽排序
      let data={
        modelIds:this.sortString
      }
      changeCarModelOrder(data).then(res=>{
        if(res.code==0){
          this.carSeriesData=[];
          this.carModelList();
          this.sortString="";
          this.$notify({
            type:'success',
            message:"排序成功"
          })
        }else{
          this.sortString="";
          this.$notify({
            type:'error',
            message:res.errMsg
          })
        }
      })
       this.sortString="";
    },
    rowDrop() {
      this.sortString="";
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this;
      Sortable.create(tbody, {
        draggable: ".el-table__row",
        forceFallback: true,
        onChoose(evt){
          evt.item.className="dragHand"
        },
        onEnd({ newIndex, oldIndex,item }) {
          item.className="el-table__row"
          const currRow = _this.carSeriesData.splice(oldIndex, 1)[0]
          _this.carSeriesData.splice(newIndex, 0, currRow)
          _this.carSeriesData = _this.carSeriesData.filter(({ adId }) => adId !== 0)         
          _this.carSeriesData.forEach((item, index) => {
          _this.sortString += item.modelId + ','
          })
          _this.sortString = _this.sortString.substr(0, _this.sortString.length - 1);
          _this.brandSort()
        }
      })
    },
    carModelSave(scope){  
      let that=this;
      let data={
        id:scope.row.id,
        modelId:this.intentCarStyles[2]
      }
      updateCarModelOrder(data).then(res=>{   
        if(res.code==0){
          that.carSeriesData=[];
          that.carModelList();
          this.$notify({
            type:'success',
            message:"修改成功"
          })
        }else{
          this.$notify({
            type:'error',
            message:res.errMsg
          })
        }
      })
    },
    carModelAdd(scope){
      let data={modelId:this.intentCarStyles[2]};
      addCarModelOrder(data).then(res=>{   // 新增
        if(res.code==0){
          this.carSeriesData=[];
          this.carModelList();
          this.$notify({
            type:'success',
            message:"新增成功"
          })
        }else{
          this.$notify({
            type:'error',
            message:res.errMsg
          })
        }
      })
    },
    carModelEdit(scope){
      let statusBtn=scope.row.carModelStatus==true?true:'';
      //   console.log(statusBtn)
      this.$set(this.carSeriesData,scope.$index,
       {
        modelName:scope.row.modelName,
        status:true,
        editStatus:false,
        carModelStatus:statusBtn,
        minPrice:scope.row.minPrice,
        id:scope.row.id,
        modelId:scope.row.modelId
        })
        getSelectCarMakeGroupModel().then(res=>{   
          if(res.code==0){
          this.carTypeData=res.data
        }else{
          this.$notify({
            type:'error',
            message:res.errMsg
          })
        }
      });
    },
    carModelCancel(scope){
      let statusBtn=scope.row.carModelStatus==true?true:'';
      this.$set(this.carSeriesData,scope.$index,
      {
        modelName:scope.row.modelName,
        status:false,
        editStatus:true,
        carModelStatus:statusBtn,
        minPrice:scope.row.minPrice,
        id:scope.row.id
      })
      this.intentCarStyles="";
      this.carTypeData=[]
    }
  }
}
</script>
<style scoped>
   /deep/.el-table__row{
      cursor: url('../../../assets/images/hand1.png'),auto
    }
  /deep/ .dragHand{
    cursor: url('../../../assets/images/drag1.png'),auto
  }
  /deep/.el-table td:last-child{
    cursor: pointer;
  }
</style>